<template>
    <div>
        <search></search>
        <div class="box">   
            <div class="inner">
                <input type="text" v-model="name" placeholder="姓名">
            </div>
        </div>
       <div class="box">   
            <div class="inner">
                 <input type="text" v-model="mobile" placeholder="手机号码">
            </div>
        </div>
        <van-cell is-link @click="showPopup">
            <div class="box">   
                <div class="inner">
                    <input type="text" v-model="address" v-if="!addres" placeholder="省份、城市、区县">
                    <input type="text" v-model="addres" v-else>
                </div>
            </div>
        </van-cell>
        <div class="box">   
            <div class="inner">
                <input type="text" v-model="address_detail" placeholder="详细地址，如楼道、楼盘号等">
            </div>
        </div>
        <div class="boxs">
            <van-checkbox v-model="checked" shape="square" checked-color="rgb(180, 40, 45)">设置为默认地址</van-checkbox>
        </div>
        <div class="store" @click="preservation()">
            保存
        </div>

        
        <van-popup v-model="show" position="bottom" :style="{ height: '40%' }" >
            <van-area title="标题" :area-list="areaList" @confirm="sure" @cancel="cancel"/>
        </van-popup>
    </div>
</template>

<script>
import search from "@/components/search"
import { areaList } from '@vant/area-data';
import { saveAction } from '@/api/home/index';
export default {
    data() {
        return {
            checked:false,
            name:"",
            address_detail:"",
            mobile:"",
            address:"",
            areaList,
            addres:"",
            shows:false, 
            show: false,
        };
    },
    methods: {
        showPopup() {
            this.show = true;
        },
        sure(e){
            this.addres = e.map(ele=>{
                return ele.name
            }).join(" ")
            this.show = !this.show;
        },
        cancel(){
            this.show = !this.show;
        },
      
        preservation(){
            saveAction({
                address:this.addres ? this.addres : this.adress,
                addressId:"",
                checked:this.checked,
                detailadress:this.address_detail,
                openId:localStorage.getItem("openId"),
                telNumber:this.mobile,
                userName:this.name
            }).then(res=>{
                this.$router.go(-1)
            })
        }
    },
    created() {
        
    },
    computed: {

    },
    mounted() {

    },
    components:{
       search 
    }
};
</script>

<style scoped lang="scss">
::v-deep .van-picker{
    height: 100%;
    overflow: hidden;
}
    ::v-deep .van-cell{
        padding: 0;
        i{
            display: none;
        }
    }
    .box{
        margin: 0 15px;
        padding: 5px 0;
        .inner{
            padding: 10px 16px;
            border-bottom: 1Px solid #f4f4f4;
            display: flex;
            input{
                height: 25px;
                border:0;
                font-size: 14px;
            }
        }
    }
      input::-webkit-input-placeholder {
        color: #ccc;
      }
      input::-moz-input-placeholder {
        color: #ccc;
      }
      input::-ms-input-placeholder {
        color: #ccc;
      }
    .boxs{
        margin: 20px 15px 0 15px;
    }
    .store{
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: rgb(180, 40, 45);
        height: 50px;
        width: 100%;
        text-align: center;
        line-height: 50px;
        color: #fff;
        font-size: .42667rem;
    }
    ::v-deep .title,::v-deep .back{
        z-index: 100;
    }
  
</style>
